<template>
  <div>
    <!-- 路由占位符 -->
    <router-view></router-view>
    <!-- tab bar页面 -->
   <van-tabbar v-model="active" @change="onChange">
       <van-tabbar-item to='/index' >
          <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? require('../../assets/icons/active/index.png') :require('../../assets/icons/inactive/index.png') " class="index-icon" />
        </template>
       </van-tabbar-item>
       <van-tabbar-item to='/serve'>
          <span>服务</span>
        <template #icon="props">
          <img :src="props.active ? require('../../assets/icons/active/serve.png') :require('../../assets/icons/inactive/serve.png') "  class="serve-icon" />
        </template>
       </van-tabbar-item>
       <van-tabbar-item to='/circle'>
          <span>金融圈</span>
        <template #icon="props">
          <img :src="props.active ? require('../../assets/icons/active/circle.png') :require('../../assets/icons/inactive/circle.png') "  class="circle-icon"/>
        </template>
       </van-tabbar-item>
       <van-tabbar-item to='/chat'>
          <span>轻聊</span>
        <template #icon="props">
          <img :src="props.active ? require('../../assets/icons/active/chat.png') :require('../../assets/icons/inactive/chat.png') " class="chat-icon" />
        </template>
       </van-tabbar-item>
       <van-tabbar-item to='/my'>
          <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? require('../../assets/icons/active/my.png') :require('../../assets/icons/inactive/my.png') " class="my-icon" />
        </template>
       </van-tabbar-item>

   </van-tabbar>

  </div>
</template>

<script>
export default {
  data () {
    return {
      active: 0

    }
  },
  created () {},
  methods: {
    onChange () {}
  }
}
</script>

<style lang="less" scoped>
.index-icon,.circle-icon,.my-icon{
  width:20px;
  height:20px;
}
.serve-icon{
  width:27px;
  height:27px;
}
.circle-icon{
  width:23px;
  height:23px;
}
</style>
